import {NavBar, DatePicker} from 'antd-mobile'
import './index.scss'
import {useEffect, useMemo, useState} from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import {useSelector} from "react-redux";
import __ from "lodash"
import DayBill from "@/components/DayBill";

const Month = () => {
    // 控制时间选择器的显隐
    const [visible, setVisible] = useState(false)
    const [currentDate, setCurrentDate] = useState(() => {
        return dayjs(new Date()).format('YYYY-MM')
    })

    //获取redux中的数据
    const {billList} = useSelector(state => state.bill)

    //当前数据按月份分组
    const groupByMonth = useMemo(() => {
        return __.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM'))
    }, [billList]);

    // 计算月度账单
    const [currentMonthList, setCurrentMonthList] = useState([])
    const result = useMemo(() => {
        const pay = currentMonthList.filter(item => item.type === 'pay').reduce((previousValue, currentValue) => previousValue + currentValue.money, 0)
        const income = currentMonthList.filter(item => item.type === 'income').reduce((previousValue, currentValue) => previousValue + currentValue.money, 0)
        return {
            pay,
            income,
            totalMoney: pay + income
        }
    }, [currentMonthList]);

    // 组件挂在时，获取当前月份账单
    useEffect(() => {
        const now = dayjs(new Date()).format('YYYY-MM')
        setCurrentMonthList(groupByMonth[now] || [])
    }, [groupByMonth])

    //当前月份按日分组
    const groupByDay = useMemo(() => {
        const data = __.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
        const keys = Object.keys(data)
        return {data, keys}
    }, [currentMonthList]);

    // 时间选择器确认事件
    const onConfirm = (date) => {
        setVisible(false)
        const formatDate = dayjs(date).format('YYYY-MM')
        setCurrentDate(formatDate)
        setCurrentMonthList(groupByMonth[formatDate] || [])
    }
    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={() => setVisible(!visible)}>
            <span className="text">
              {currentDate} 账单
            </span>
                        <span className={classNames('arrow ', visible ? 'expand' : '')}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{result.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{result.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{result.totalMoney.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        visible={visible}
                        onClose={() => setVisible(false)}
                        onConfirm={onConfirm}
                        onCancel={() => {
                            setVisible(false)
                        }}
                        defaultValue={new Date()}
                        min={new Date(2023, 0, 1)}
                        max={new Date()}
                    />
                </div>
                {/*单日列表统计*/}
                {groupByDay.keys.map(item => {
                    return <DayBill key={item} date={item} billList={groupByDay.data[item]}/>
                })}
            </div>
        </div>
    )
}

export default Month
